<template>
    <section>
        <div class="main" style="overflow: auto;width:100%">
            <!--nr start-->
            <div class="test_main">
                <div class="nr_left">
                    <div class="test">
                        <form action="" method="post">
                            <div class="test_title">
                                <p class="test_time">
                                    <i class="icon iconfont">&#xe6fb;</i><b class="alt-1">{{this.rtime}}</b>
                                </p>
                                <input type="button" name="test_jiaojuan" value="完成" @click="goToOverExam()">
                            </div>
                            <div class="test_content_nr">
                                <!--单选题-->
                                <div class="test_content_title" v-show="isshow1==true">
                                    <h2>单选题</h2>
                                </div>
                                <ul>
                                    <li v-for="(item,index) in choiceList" :id="'choice'+index" >
                                        <div class="test_content_nr_tt">
                                            <i>{{index+1}}</i><span>{{ item.choice.content}}</span>
                                        </div>
                                        <div class="test_content_nr_main">
                                            <el-radio-group v-model="item.examRecord.answer" text-color="#409EFF">
                                                <el-radio label="A" style="margin-left: 40px;margin-top: 10px">A.
                                                    {{item.choice.labela}}
                                                </el-radio>
                                                <br/>
                                                <el-radio label="B" style="margin-left: 40px;margin-top: 10px">B.
                                                    {{item.choice.labelb}}
                                                </el-radio>
                                                <br/>
                                                <el-radio label="C" style="margin-left: 40px;margin-top: 10px">C.
                                                    {{item.choice.labelc}}
                                                </el-radio>
                                                <br/>
                                                <el-radio label="D" style="margin-left: 40px;margin-top: 10px">D.
                                                    {{item.choice.labeld}}
                                                </el-radio>
                                                <br/>
                                            </el-radio-group>
                                            <br>
                                        </div>
                                    </li>
                                </ul>
                                <!--多选题-->
                                <div class="test_content_title" v-show="isshow2==true">
                                    <h2>多选题</h2>
                                </div>
                                <ul>
                                    <li  v-for="(item,index) in manychoiceList":id="'manychoice'+index">
                                        <div class="test_content_nr_tt">
                                            <i>{{index+1}}</i><span>{{ item.choice.content}}</span>
                                        </div>
                                        <div class="test_content_nr_main">
                                            <el-checkbox-group v-model="item.examRecord.answer">
                                                <el-checkbox label="A" style="margin-left: 40px;margin-top: 10px">A. {{item.choice.labela}}</el-checkbox><br/>
                                                <el-checkbox label="B" style="margin-left: 40px;margin-top: 10px">B. {{item.choice.labelb}}</el-checkbox><br/>
                                                <el-checkbox label="C" style="margin-left: 40px;margin-top: 10px">C. {{item.choice.labelc}}</el-checkbox><br/>
                                                <el-checkbox label="D" style="margin-left: 40px;margin-top: 10px">D. {{item.choice.labeld}}</el-checkbox><br/>
                                                <el-checkbox label="E" v-if="item.choice.labele ==null" style="margin-left: 40px;margin-top: 10px">E. {{item.choice.labele}}</el-checkbox><br/>
                                                <el-checkbox label="F" v-if="item.choice.labelf ==null" style="margin-left: 40px;margin-top: 10px">F. {{item.choice.labelf}}</el-checkbox><br/>
                                            </el-checkbox-group><br>
                                        </div>
                                    </li>
                                </ul>
                                <!--判断题-->
                                <div class="test_content_title" v-show="isshow3==true">
                                    <h2>判断题</h2>
                                </div>
                                <ul>
                                    <li v-for="(item,index) in truefalseList" :id="'truefalse'+index">
                                        <div class="test_content_nr_tt">
                                            <i>{{index+1}}</i><span>{{ item.trueFalse.content}}</span>
                                        </div>
                                        <div class="test_content_nr_main">
                                            <el-radio-group v-model="item.examRecord.answer" text-color="#409EFF">
                                                <el-radio :label="1" style="margin-left: 40px;margin-top: 10px">对</el-radio><br/>
                                                <el-radio :label="-1" style="margin-left: 40px;margin-top: 10px">错</el-radio><br/>
                                            </el-radio-group><br>
                                        </div>
                                    </li>
                                </ul>
                                <!--填空题-->
                                <div class="test_content_title" v-show="isshow4==true">
                                    <h2>填空题</h2>
                                </div>
                                <ul>
                                    <li  v-for="(item,index) in completionList" :id="'completion'+index">
                                        <div class="test_content_nr_tt">
                                            <i>{{index+1}}</i><span>{{ item.completion.content}}</span>
                                        </div>
                                        <div class="test_content_nr_main">
                                            <div v-for="a in item.completion.blankCount">
                                                <span style="margin-left: 40px">第 {{a}} 空</span>
                                                <el-input v-model="item.examBlankrecords[a-1].answer" placeholder="请输入答案" style="margin-left: 40px;margin-top: 10px;max-width: 50%"></el-input><br>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                                <!--简答题-->
                                <div class="test_content_title" v-show="isshow5==true">
                                    <h2>简答题</h2>
                                </div>
                                <ul>
                                    <li  v-for="(item,index) in shortanswerList" :id="'shortanswer'+index">
                                        <div class="test_content_nr_tt">
                                            <i>{{index+1}}</i><span>{{ item.shortAnswer.content}}</span>
                                        </div>
                                        <div class="test_content_nr_main">
                                            <el-input
                                                    type="textarea"
                                                    :rows="5"
                                                    v-model="item.examRecord.answer">
                                            </el-input>
                                        </div>
                                    </li>
                                </ul>
                                <!--程序设计题-->
                                <div class="test_content_title" v-show="isshow6==true">
                                    <h2>程序设计题</h2>
                                </div>
                                <ul>
                                    <li v-for="(item,index) in programmingList" :id="'programming'+index">
                                        <div class="test_content_nr_tt">
                                            <i>{{index+1}}</i><span>{{ item.programming.content}}</span>
                                        </div>
                                        <div class="test_content_nr_main">
                                            <el-input
                                                    type="textarea"
                                                    :rows="30"
                                                    v-model="item.examRecord.answer">
                                            </el-input>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="nr_right">
                    <div class="nr_rt_main">
                        <div class="rt_nr1">
                            <el-tabs type="border-card">
                                <el-tab-pane label="学生">
                                    <el-table
                                            ref="singleTable"
                                            :data="tableData"
                                            highlight-current-row
                                            @current-change="handleCurrentChange"
                                            style="width: 100%;text-align: left">
                                        <el-table-column
                                                type="index"
                                                width="40">
                                        </el-table-column>
                                        <el-table-column
                                                property="name"
                                                label="姓名"
                                                width="110">
                                        </el-table-column>
                                        <el-table-column
                                                property="score"
                                                label="成绩">
                                        </el-table-column>
                                    </el-table>
                                    <div style="margin-top: 20px">
                                        <el-button @click="setCurrent()">重新选择</el-button>
                                    </div>
                                </el-tab-pane>
                                <el-tab-pane label="试卷">
                                    <!--单选题-->
                                    <div class="rt_content" v-show="isshow1==true">
                                        <div class="rt_content_tt">
                                            <h2>单选题</h2>
                                        </div>
                                        <div class="rt_content_nr answerSheet">
                                            <ul>
                                                <li v-for="(item,index) in choiceList"><a :href="'#choice'+index">{{index+1}}</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <!--多选题-->
                                    <div class="rt_content" v-show="isshow2==true">
                                        <div class="rt_content_tt">
                                            <h2>多选题</h2>
                                        </div>
                                        <div class="rt_content_nr answerSheet">
                                            <ul>
                                                <li v-for="(item,index) in manychoiceList"><a :href="'#manychoice'+index">{{index+1}}</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <!--判断题-->
                                    <div class="rt_content" v-show="isshow3==true">
                                        <div class="rt_content_tt">
                                            <h2>判断题</h2>
                                        </div>
                                        <div class="rt_content_nr answerSheet">
                                            <ul>
                                                <li v-for="(item,index) in truefalseList"><a :href="'#truefalse'+index">{{index+1}}</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <!--填空题-->
                                    <div class="rt_content" v-show="isshow4==true">
                                        <div class="rt_content_tt">
                                            <h2>填空题</h2>
                                        </div>
                                        <div class="rt_content_nr answerSheet">
                                            <ul>
                                                <li v-for="(item,index) in completionList"><a :href="'#completion'+index">{{index+1}}</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <!--简答题-->
                                    <div class="rt_content" v-show="isshow5==true">
                                        <div class="rt_content_tt">
                                            <h2>简答题</h2>
                                        </div>
                                        <div class="rt_content_nr answerSheet">
                                            <ul>
                                                <li v-for="(item,index) in shortanswerList"><a :href="'#shortanswer'+index">{{index+1}}</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <!--程序设计题-->
                                    <div class="rt_content" v-show="isshow6==true">
                                        <div class="rt_content_tt">
                                            <h2>程序设计题</h2>
                                        </div>
                                        <div class="rt_content_nr answerSheet">
                                            <ul>
                                                <li v-for="(item,index) in programmingList"><a :href="'#programming'+index">{{index+1}}</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </el-tab-pane>
                            </el-tabs>
                        </div>

                    </div>
                </div>
            </div>
            <!--nr end-->
            <div class="foot"></div>
        </div>
    </section>
</template>

<script>
    export default {
        name: "markpaper",
        data() {
            return {
                //选择学生
                tableData: [{
                    id:'',
                    name: '王一虎',
                    score: '80'
                }, {
                    id:'',
                    name: '王二虎',
                    score: '90'
                }, {
                    id:'2',
                    name: '王三虎',
                    score: ''
                }, {
                    id:'',
                    name: '王四虎',
                    score: ''
                }],
                currentRow: null,


                //试卷
                starttime:'',
                rtime: "",
                time: 0,
                user: {},
                studentid: '',
                id: '',
                name: '',
                isshow1: false,
                isshow2: false,
                isshow3: false,
                isshow4: false,
                isshow5: false,
                isshow6: false,
                buttonshow: false,
                //题目信息列表
                paperExerciseList: [],
                choiceList: [],
                manychoiceList: [],
                truefalseList: [],
                completionList: [],
                shortanswerList: [],
                programmingList: [],
                exerciseDetails:[],
            }
        },
        methods: {
            //选择学生
            setCurrent(row) {
                this.$refs.singleTable.setCurrentRow(row);
            },
            handleCurrentChange(val) {
                this.currentRow = val;
            },


            //试卷
            goToOverExam() {
                this.exerciseDetails = this.exerciseDetails.concat(this.choiceList,this.manychoiceList,this.truefalseList,this.completionList,this.shortanswerList,this.programmingList);
                console.log(this.exerciseDetails);
                let examid=this.id;
                this.$http.post("/api/attendexam/submitExam/"+this.studentid+'/'+examid,this.exerciseDetails).then((res)=>{
                    this.$router.push({path: "/overExam"});
                }).catch((error)=>{
                    console.log(error);
                });
            },
            getExampaperTypeInfo() {
                this.$http.post("/api/exam/findExerciseDetailByexamid/" + this.id).then((res) => {
                    this.paperExerciseList = res.data.data;
                    console.log( this.paperExerciseList);
                    for (let i = 0; i < this.paperExerciseList.length; i++) {
                        if (this.paperExerciseList[i].exerciseInfo.type === 1) {
                            this.isshow1 = true;
                            this.choiceList.unshift(this.paperExerciseList[i]);
                        }
                        else if (this.paperExerciseList[i].exerciseInfo.type === 2) {
                            this.isshow2 = true;
                            this.paperExerciseList[i].examRecord.answer=new Array();
                            this.manychoiceList.unshift(this.paperExerciseList[i]);
                        }
                        else if (this.paperExerciseList[i].exerciseInfo.type === 3) {
                            this.isshow3 = true;
                            this.truefalseList.unshift(this.paperExerciseList[i]);
                        }
                        else if (this.paperExerciseList[i].exerciseInfo.type === 4) {
                            this.isshow4 = true;
                            for(var j=0;j<this.paperExerciseList[i].completion.blankCount;j++){
                                this.paperExerciseList[i].examBlankrecords[j]={};
                            }
                            this.completionList.unshift(this.paperExerciseList[i]);
                        }
                        else if (this.paperExerciseList[i].exerciseInfo.type === 5) {
                            this.isshow5 = true;
                            this.shortanswerList.unshift(this.paperExerciseList[i]);
                        }
                        else if (this.paperExerciseList[i].exerciseInfo.type === 6) {
                            this.isshow6 = true;
                            this.programmingList.unshift(this.paperExerciseList[i]);
                        }
                    }
                }).catch((error) => {
                    console.log(error);
                })
            },
        },
        mounted() {
            this.id = this.$route.query.id;
        }
    }
</script>

<style scoped>
    @import '../../components/common/css/student/test.css';
    @import '../../components/common/css/student/iconfont.css';
    @import '../../components/common/css/student/main.css';
</style>